<template>
	<scroll-view class="scroll-Y" scroll-y="true" @scroll="handleScroll">
		<view v-for="(month, index) in months" :key="index">
			<view :id="'month-' + index" class="flex month-header" :class="{'fixed-top': fixedIndex === index}"
				:style="{'z-index':10+index}">
				<view class="flex" style="align-items: flex-end;">{{ month.year }}年{{ month.month }}月
					<image src="/static/img/downBlack.png" style="margin-left: 20rpx;width: 30rpx;height: 30rpx;"
						mode=""></image>
				</view>
				<view>支出￥0.00 收入￥0.00</view>
			</view>
			<view v-if="index==0" class="month-header"></view>
			<view :id="'mon-' + index"></view>
			<view v-for="record in month.records" :key="record.id" class="flex hcenter record-item" @click="ondetail(record)">
				<!-- 交易记录内容 -->
				<view class="flex hcenter " style="font-size: 30rpx;">
					<image v-if="record.amount>0" src="/static/images/add.png" style="width: 60rpx;height: 60rpx;"
						mode=""></image>
					<image v-else src="/static/images/dec.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
					<view style="margin-left: 20rpx;">
						<view >名称</view>
						<view style="color: #aaa;">{{ record.date }}</view>
					</view>
				</view>
				<view v-if="record.amount>0" style="color: #ff6000;font-size: 36rpx;">+{{ record.amount }}</view>
				<view v-else style="font-size: 36rpx;">{{ record.amount }}</view>
			</view>
		</view>
	</scroll-view>
</template>


<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import { moneyLogApi } from '@/api/user.js'
	import {
		number
	} from '../../uni_modules/uview-plus/libs/function/test'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				fixedIndex: 0, // 当前固定在顶部的月份索引
				months: [{
					year: 2024,
					month: 8,
					records: [{
							id:1,
							date: '2024-8-1',
							amount: 0.01
						},
						{
							date: '2024-8-2',
							amount: -0.01
						}, {
							date: '2024-8-3',
							amount: 0.01
						}, {
							date: '2024-8-4',
							amount: 0.01
						}, {
							date: '2024-8-5',
							amount: 0.01
						}, {
							date: '2024-8-6',
							amount: 0.01
						}, {
							date: '2024-8-7',
							amount: 0.01
						}, {
							date: '2024-8-8',
							amount: 0.01
						}, {
							date: '2024-8-9',
							amount: 0.01
						}, {
							date: '2024-8-10',
							amount: 0.01
						}, {
							date: '2024-8-11',
							amount: 0.01
						}, {
							date: '2024-8-12',
							amount: 0.01
						}, {
							date: '2024-8-13',
							amount: 0.01
						}, {
							date: '2024-8-14',
							amount: 0.01
						}, {
							date: '2024-8-15',
							amount: 0.01
						},

					]
				}, {
					year: 2024,
					month: 7,
					records: [{
						date: '2024-7-1',
						amount: 0.01
					}, ],
				}, {
					year: 2024,
					month: 6,
					records: [{
							date: '2024-7-1',
							amount: 0.01
						},
						{
							date: '2024-7-2',
							amount: 0.01
						}, {
							date: '2024-7-3',
							amount: 0.01
						}, {
							date: '2024-7-4',
							amount: 0.01
						}, {
							date: '2024-7-5',
							amount: 0.01
						}, {
							date: '2024-7-6',
							amount: 0.01
						}, {
							date: '2024-7-7',
							amount: 0.01
						}, {
							date: '2024-7-8',
							amount: 0.01
						}, {
							date: '2024-7-9',
							amount: 0.01
						}, {
							date: '2024-7-10',
							amount: 0.01
						}, {
							date: '2024-7-11',
							amount: 0.01
						}, {
							date: '2024-7-12',
							amount: 0.01
						}, {
							date: '2024-7-13',
							amount: 0.01
						}, {
							date: '2024-7-14',
							amount: 0.01
						}, {
							date: '2024-7-15',
							amount: 0.01
						},

					]
				}], // 处理后的按月分组的数据  
			})
			onLoad((option) => {
				getData()
				uni.setNavigationBarTitle({
					title: '交易记录',
				})
				state.months[0].top = 0;
			})
			onMounted(() => {
				console.log('页面加载完成');
				const query = uni.createSelectorQuery();
				if (state.months.length > 0) {
					query.select('#month-0').boundingClientRect(rect => {
						state.months[0].height = rect.height;
						console.log(rect);
					}).exec();
				}
			})
			const getData = async () => {
			  await	moneyLogApi({
				  page:1,
				  pageSize:10
			  })


			}
			const ondetail = async (e) => {
				uni.navigateTo({
					url:"/subpages/wallet/detail?id="+e.id
				})
			}
			const handleScroll = async (e) => {
				// console.log((e));
				const scrollTop = e.detail.scrollTop; // 获取当前滚动位置  
				let currentIndex = state.fixedIndex; // 当前固定在顶部的月份索引  
				const query = uni.createSelectorQuery();
				// 遍历所有月份统计行，找到最接近滚动位置的统计行  
				for (let i = 0; i < state.months.length; i++) {
					query.select('#mon-' + i).boundingClientRect(rect => {
						// state.months[i].top = rect.top;
						// if(state.months[currentIndex].top==null && currentIndex==i)
						// 	state.months[currentIndex].top = rect.top;
						// if (rect.top <= scrollTop  && rect.top > state.months[currentIndex].top) {
						// 	currentIndex = i;
						// 	// state.months[currentIndex].top = rect.top; // 保存当前月份顶部的位置，用于下次比较  
						// }
						//console.log(i+""+rect.top)
						//console.log(i==state.months.length-1)

						// console.log()
						var idd = Number(rect.id.replace('mon-', ''));
						console.log(idd + "  " + rect.top)
						if (rect.top <= (2 * state.months[0].height) && rect.top > state.months[0]
							.height && idd != 0 &&
							(idd == state.months.length - 1 || state.months[idd + 1].top > 0)) {
							if (currentIndex != idd)
								currentIndex = idd;

						}
						if (rect.top > (2 * state.months[0].height) && rect.top < (state.months[0].height *
								5)) {
							currentIndex = idd - 1;
						}
					}).exec();
				}

				// 更新固定在顶部的月份索引  
				state.fixedIndex = currentIndex;
				// console.log(state.fixedIndex+"--")
			}
			return {
				...toRefs(state),
				handleScroll,
				ondetail
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		// background: rgb(244, 244, 244);
	}

	.scroll-Y {
		height: 100vh;
	}

	.fixed-top {
		position: fixed;
		top: 88rpx;
		width: 100%;
		z-index: 10;
		background-color: #fff;
	}

	.month-header {
		/* 月份头部的样式 */
		padding: 36rpx 44rpx;
		background-color: #eee;
		justify-content: space-between;
		align-items: center;
		height: 33rpx;
		width: 90%;
	}

	.record-item {
		padding: 36rpx 20rpx 36rpx 28rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		// height: 34rpx;
		justify-content: space-between;
	}
</style>